<script setup lang='ts'>
import { ref } from 'vue';
const showAvatar = ref(true)
const show = () => {
  showAvatar.value = !showAvatar.value
  console.log(showAvatar.value)
}

enum SizeEnum{
  S="s",
  M="m",
  L="l",
  XL="xl",
  XXL="xxl",
  XXXL="xxxl"
}
const sizeData = ref<SizeEnum>(SizeEnum.S)
const changeSize = () => {
  if(sizeData.value === SizeEnum.S) {    
sizeData.value = SizeEnum.M   
}  
else if(sizeData.value === SizeEnum.M) {    
sizeData.value = SizeEnum.L   
}   
else if(sizeData.value === SizeEnum.L) {    
sizeData.value = SizeEnum.XL   
}   
else if(sizeData.value === SizeEnum.XL) {    
sizeData.value = SizeEnum.XXL   
}    
else if(sizeData.value === SizeEnum.XXL) {    
sizeData.value = SizeEnum.XXXL   
}   
else  {    
sizeData.value = SizeEnum.S   
}
}
</script>
<template>
  <!-- <div class="container">
    <h1>测试条件渲染 v-show</h1>
    <img v-show="showAvatar" class="avatar"
      src="https://img0.baidu.com/it/u=3469997291,1356299442&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1734109200&t=d4c77757c87969671ae5e646f36957ce"
      alt="" />
    <div>
      <button @click="show">显示/隐藏</button>
    </div>
  </div> -->
  <div class="container">
    <h1>测试条件渲染 v-if</h1>
    <img v-if="showAvatar" class="avatar"
      src="https://img0.baidu.com/it/u=3469997291,1356299442&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1734109200&t=d4c77757c87969671ae5e646f36957ce"
      alt="" />
    <div>
      <button @click="show">显示/隐藏</button>
    </div>
    <p>
      <h2 v-if="sizeData===SizeEnum.S">小孩的尺码</h2>
      <h2 v-else-if="sizeData===SizeEnum.M">大孩的尺码</h2>
      <h2 v-else-if="sizeData===SizeEnum.L">青年的尺码</h2>
      <h2 v-else-if="sizeData===SizeEnum.XL">正常的尺码</h2>
      <h2 v-else-if="sizeData===SizeEnum.XXL">微胖的尺码</h2>
      <h2 v-else="sizeData===SizeEnum.XXXL">胖子的尺码</h2>
    </p>
    <p>
      <button @click="changeSize">改变尺寸</button>
    </p>
  </div>
</template>

<style scoped>
.avatar {
  width: 200px;
  height: 200px;
}

.container {
  width: 100%;
  text-align: center;
}
</style>